<template>
  <div class="home">
    <a-card title="欢迎使用 Vue2 + Ant Design + X6 项目" :bordered="false">
      <a-row :gutter="16">
        <a-col :span="12">
          <a-card title="项目特性" size="small">
            <ul>
              <li>Vue 2.6.14 - 渐进式JavaScript框架</li>
              <li>Ant Design Vue 1.7.8 - 企业级UI组件库</li>
              <li>X6 2.11.1 - 图编辑引擎</li>
              <li>Vue Router - 官方路由管理器</li>
              <li>Vuex - 状态管理模式</li>
            </ul>
          </a-card>
        </a-col>
        <a-col :span="12">
          <a-card title="快速开始" size="small">
            <a-space direction="vertical" style="width: 100%;">
              <a-button type="primary" @click="goToGraph">
                查看图形编辑器
              </a-button>
              <a-button @click="showInfo">
                项目信息
              </a-button>
            </a-space>
          </a-card>
        </a-col>
      </a-row>
    </a-card>
  </div>
</template>

<script>
export default {
  name: 'Home',
  methods: {
    goToGraph() {
      this.$router.push('/graph')
    },
    showInfo() {
      this.$message.info('这是一个基于Vue2、Ant Design和X6的项目模板')
    }
  }
}
</script>

<style scoped>
.home {
  max-width: 1200px;
  margin: 0 auto;
}
</style> 